<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>取消行程</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style type="text/css">
        .layui-layer {
            border-radius: 0px !important;
        }
        .delete-travel-pic{
            text-align: center;
            margin-top: 60px;
        }
        .delete-travel-pic>img{
            width: 60%;
            height: auto;
        }
        .cancel-msg{
            font-family: PingFang-SC;
            font-size: 18px;
            text-align: center;
            color: #9ea7b1;
            margin-top: 12px;
        }
        .cancel-fare{
            font-size: 60px;
            text-align: right;
            color: #4f5a67;
            vertical-align: baseline;
        }
        .delete-travel-pic>.cancel-href{
            margin: 0;
            line-height: 46px;
        }
        .e-btns{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container-fluid cancelCar">
    <div class="delete-travel-pic">
       <p class="cancel-href">取消费用</p>
       <p class="cancel-href"><span class="cancel-fare">5</span>元</p>
       <p class="cancel-href" id="cancelMsg">当前取消需支付5元取消费</p>
    </div>
    <%--<div class="cancel-msg">本次取消不收取费用</div>--%>
    <div class="e-btns">
        <a id="noCancelBtn" class="btn-d btn-no-cancel" href="javascript:void(0);">暂不取消</a>
        <a id="cancelBtn" class="btn-d btn-submit-able" href="javascript:void(0);">提交</a>
        <div style="text-align: center;"><a class="cancel-href cancel-rule" id="cancel-rule" style="vertical-align: middle;">取消规则</a></div>
    </div>
</div>

</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script>
    jQuery(document).ready(function($) {
        var $document = $(document);
        var yun=new yueajax( "${openId}");
        //取消规则路径
        yun.order_ajax(function(data){
            $('#cancel-rule').attr('href',base+'/h5/passenger/cancelRule?appid='+appid+'&orderUuid='+data.data.uuid);
        },function (data) {

        })
        //初始化页面
       var cancelTotal= url.getQueryString('cancelTotal');
       var details= url.getQueryString('details');

       $('.cancel-fare').html(cancelTotal);
       $('#cancelMsg').html(details);
//        暂不取消
        $document.on('touchend', '#noCancelBtn', function(event){
            yun.order_ajax(function(data){
                changeUrl(data.data.subStatus,yun.orderUuid);
            },function(data){})
        });
//        提交
        $document.on('touchend', '#cancelBtn', function(event){
            yun.ajax_md5(
                {
                    orderUuid:yun.orderUuid,
                    cancelMsg:'司机已到达乘客有责取消'
                },
                '${base}/api/v1/passenger/token/order/confirmCancel',
                function (data) {
                    changeUrl('cancelYesPay',yun.orderUuid)
                },
                function (data) {
                    layer.msg(data.msg);
                }
            )
        });

    })
</script>

</html>
